iT邦幫忙

2024 iThome 鐵人賽

DAY 12
0
Modern Web

Super Easy CSS,極度簡單 PART 2!寫出漂亮的 CSS系列 第 12

#46 CSS 濾鏡 filter/ backdrop-filter:模糊、透明圖陰影、調色與毛玻璃效果

  • 分享至 

  • xImage
  •  

本篇同步發表於我的 Hashnode 部落格:
Eva Chen | 網頁設計師下班後 (hashnode.dev)


↓ 今日學習重點 ↓

  • 學會 CSS 濾鏡 filter 的用法

  • 學會 CSS 背景濾鏡 backdrop-filter 的用法

除了用繪圖軟體在圖片上調整色調,CSS 內建的濾鏡效果也能讓我們做到這些特殊效果,例如:模糊、變亮、對比、色相、飽和度調整等等,甚至還可以做到毛玻璃效果!

今天,我們要介紹的是 filterbackdrop-filter 這兩個強大的 CSS 屬性。


一、濾鏡 filter

filter 屬性能讓你對 HTML 元素本身做一系列的圖像處理效果,讓我們能在不使用繪圖軟體的情況下實現各種特效,例如:模糊、明度、對比度等。

基本語法

filter 使用的語法很簡單,語法如下:

div {
    filter: 方法(數值);
}

特效效果

filter 總共有以下幾種效果可以使用:

DEMO: CSS filter

  • blur:模糊
    需要填寫數值,單位可以是 pxemrem 等。

  • brightness:明度
    調整亮度,需要填寫百分比值:100%為原本的明度,往下是調暗,往上是調亮。

  • contrast:對比度
    調整對比度,需要填寫百分比值:100%為原本的對比度,往下是減低,往上是增加。

  • grayscale:灰階
    轉為灰階,需要填寫 0 到 1 之間的值,1 代表完全灰階。

  • hue-rotate:色相
    調整色相環的位置,需要填寫角度,單位可以是 deg(度數)或 turn(圈數)。

  • invert:反轉
    轉為相反的顏色,會變成對比色,需要填寫 0 到 1 之間的值,1 代表完全相反。

  • opacity:透明度
    調整對比度,需要填寫百分比值:100%為不透明,效果等同於:opacity: 數值;

  • sepia:棕褐色
    轉為懷舊的褐色調,需要填寫 0 到 1 之間的值,1 代表完全褐色。

  • saturate:飽和度
    調整飽和度,需要填寫百分比值:100%為原本的對比度,往下是減低,往上是增加。

  • drop-shadow:陰影
    在圖片中非透明的周圍加上陰影,這針對透明圖片超好用!
    例如,如果單單為透明圖片加上基本的陰影 box-shadow,會像下方圖片一樣悲劇,陰影沒有加在實際圖案的周圍,但用了 filterdrop-shadow 就能為實際圖案的邊緣加上陰影:

    DEMO: CSS box-shadow v.s filter drop-shadow

多重特效

你也可以使用多種特效在一個 HTML 元素上,只要簡單使用空格隔開就好了,例如:

div {
    filter: contrast(175%) brightness(105%);
}

二、背景濾鏡 backdrop-filter

backdrop-filter 可以對 HTML 元素後面的背景製作濾鏡效果,影響的是背後的東西,而不是自己本身。最常見的是用來製作非常受歡迎的「毛玻璃效果 Glassmorphism」,利用模糊區隔出背景,製造出透明感的景深效果,最常見被用在 iOS 系統中、彈跳視窗光箱(lightbox)或是導覽列(Navbar)上等等。

在 Dribbble 上搜尋的 Glassmorphism 的話,會出現以下像這樣酷炫的 UI,給大家參考:

基本語法

backdrop-filter 語法的使用方式,基本上和 filter 一樣:

div {
    backdrop-filter: 方法(數值);
}

特效效果

backdrop-filter 通常用在浮動的 HTML 元素上(如:絕對定位、固定定位、sticky 等等)。它可使用的效果和 filter 一樣,請參考上面 filter 所列出來的所有效果。

只不過經我實測,opacitydrop-shadow 不起作用,所以以下的 DEMO 範例沒有它們:

DEMO: CSS backdrop-filter

剛剛說的「毛玻璃效果 Glassmorphism」就是使用其中的 blur() 效果。

多重特效

filter 一樣,你也可以使用多種特效在一個 HTML 元素上,只要簡單使用空格隔開就好了,例如:

.element {
  backdrop-filter: blur(10px) brightness(60%);
}

上面的例子會將元素後面的背景模糊處理,並且使其稍微變暗(亮度調低至 60%)。這樣可以做出類似黑色毛玻璃效果。


三、固定定位(fixed)+ filter/backdrop-filter 的陷阱

如果 fixed 項目的父層上有 filterbackdrop-filter 屬性,該 fixed 項目就不會依據「瀏覽器的視窗大小」進行定位,而是依據「該 HTML 的父層」定位。

雖然我有點忘記當初是因為什麼版型,遇到這樣的陷阱,
但我這邊可以做個實例給大家參考看看:

Conflict between fixed item and filter (backdrop-filter)

解法: 改變 filter 的元素,或是改使用 sticky 做到類似效果。

延伸閱讀:
#21 CSS Position:relative、absolute、fixed、sticky 找到適合的定位

filter与fixed冲突的原因及解决方案 - 掘金


↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

感謝看到最後的你,若你覺得獲益良多,請不要吝嗇給我按個喜歡。❤️

如果你喜歡我的創作,還想看看其他有趣的分享與日常,
可以追蹤我的 IG @im1010ioio,或者是🧋送杯珍奶鼓勵我,謝謝你🥰。

Eva Chen 送杯珍奶鼓勵我


上一篇
#45 CSS 中的半透明遮罩 mask,實現各種模糊邊緣特效
下一篇
#47 一次搞懂 CSS 各種混合模式:mix-blend-mode/ background-blend-mode
系列文
Super Easy CSS,極度簡單 PART 2!寫出漂亮的 CSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言